<template>
  <div class="app-container">
    <el-card>
      <el-card class="box-card" shadow="nerver">
        <div slot="header" class="clearfix">
          <span class="role-span project-title">
            {{ profile.name }}
            <router-link
              v-if="profile.name"
              :to="{ path: '/project/profile', query: { pid: profile.id } }"
              class="edit-link"
            >
              编辑
            </router-link>
          </span>
          <div class="box-card-btn">
            <el-button type="success" :loading="profileLoading" @click="refreshProfile">
              刷新项目信息
            </el-button>
            <el-button
              type="primary"
              v-if="!hasAward"
              :loading="openLoading"
              @click="openBid"
              :disabled="!canOpen"
            >
              开标
            </el-button>
            <el-button
              type="warning"
              @click="toOpenTable"
              v-if="profile.status === 'OPEN' || hasAward"
            >
              开标一览表
            </el-button>

            <div v-if="!hasAward">
              <vue-countdown-timer
                @end_callback="entryTimeEnd"
                :start-time="Date.now()"
                :end-time="profile.entryTime"
                :interval="1000"
                :end-label="'距离报名时间结束还有'"
                label-position="begin"
                :end-text="'报名已截止,等待报价'"
                :day-txt="'天'"
                :hour-txt="'小时'"
                :minutes-txt="'分钟'"
                :seconds-txt="'秒'"
                class="timer"
                v-if="!entryEnd"
              ></vue-countdown-timer>
              <vue-countdown-timer
                :start-time="Date.now()"
                :end-time="profile.openTime"
                :interval="1000"
                :end-label="'距离开标时间还有'"
                label-position="begin"
                :end-text="'已停止报价,等待开标'"
                :day-txt="'天'"
                :hour-txt="'小时'"
                :minutes-txt="'分钟'"
                :seconds-txt="'秒'"
                class="timer"
                v-else
              ></vue-countdown-timer>
            </div>
          </div>
        </div>
        <profile-table :profile="profile"></profile-table>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="role-span">
            报价清单
          </span>
        </div>

        <plan-apply-list v-model="profile.projectPlans" :checkMode="true"></plan-apply-list>
      </el-card>
    </el-card>

    <supplier-select-table
      :profile="profile"
      v-if="profile.id"
      mode="admin"
      ref="sst"
    ></supplier-select-table>
    <!-- 流转表格 -->
    <clar :status-list="statusList"></clar>
  </div>
</template>

<script>
  import * as ProjectRequest from '@/api/project';
  import * as SupplierRequest from '@/api/supplier';
  import { resultFormatter } from '@/utils';
  import PlanApplyList from './planApplyList';
  import SupplierSelectTable from './supplierSelectTable';
  import ProfileTable from './profileTable';
  import Clar from './clar';

  export default {
    name: 'ProjectSupplierProcess',

    data() {
      return {
        pid: '',
        supplierList: [],
        profile: {},
        openLoading: false,
        profileLoading: false,
        entryEnd: false,
        planExpanded: false,
        offerList: [],
        statusList: [],
      };
    },
    computed: {
      hasAward() {
        return this.profile.status === 'AWARD';
      },
      canOpen() {
        const allSupplierOffered = true;
        for (const key in this.supplierList) {
          if (this.supplierList[key].supplierPlans.length === 0) {
            allSupplierOffered = false;
            break;
          }
        }
        return (
          allSupplierOffered &&
          this.profile.openTime - Date.now() < 1000 &&
          this.profile.status !== 'OPEN'
        );
      },
    },
    components: {
      PlanApplyList,
      SupplierSelectTable,
      ProfileTable,
      Clar,
    },
    watch: {
      $route() {
        this.init();
      },
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        const { pid } = this.$route.query;
        if (pid) {
          this.pid = pid;
          this.getProjectProfile();
        } else {
          this.$message.error('项目不存在, 或者无访问权限');
          this.$EventBus.$emit('closeCurrentPage');
        }
      },
      /**
       * 获取项目状态
       */
      getProjectStatus() {
        ProjectRequest.getProjectStatus({
          projectId: this.pid,
        }).then((res) => {
          // 这里还是反转一下看着舒服些
          this.statusList = [...res.content].reverse();
        });
      },
      /**
       * 获取项目内容
       */
      getProjectProfile() {
        if (this.profileLoading) return;
        this.profileLoading = true;
        return ProjectRequest.getProfile({
          id: this.pid,
        })
          .then((res) => {
            this.profile = {
              ...res,
              projectPlans: resultFormatter(res.projectPlans),
            };
            this.entryTimeEnd();
            this.getProjectStatus();
          })
          .finally(() => {
            this.profileLoading = false;
          });
      },
      /**
       * 更新内容
       */
      refreshProfile() {
        this.getProjectProfile().then(() => {
          this.$refs['sst'].getSupplier();
          this.$message.success('刷新项目信息成功!供应商状态刷新成功');
        });
      },
      /**
       * 报名时间结束
       */
      entryTimeEnd() {
        this.entryEnd = this.profile.entryTime - Date.now() < 1000;
      },
      /**
       * 开标
       */
      openBid() {
        ProjectRequest.openProjectBid({
          projectId: this.profile.id,
        }).then((res) => {
          this.$message.success('项目开标成功,请查看开标一览表!');
          this.refreshProfile();
        });
      },
      toOpenTable() {
        this.$router.push({
          path: '/project/opentable',
          query: { pid: this.profile.id },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .timer {
    font-size: 12px;
    color: red;
    font-weight: bolder;

    /deep/ i {
      font-style: normal;
    }
  }

  .project-title {
    font-size: 26px;
    font-weight: bolder;
    vertical-align: middle;

    .edit-link {
      color: #2222ff;
      font-size: 12px;
      margin-left: 5px;
    }
  }

  .box-card-btn {
    vertical-align: bottom;
    display: flex;
    align-items: center;

    .refresh-btn {
      margin-right: 10px;
    }
  }
</style>
